<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
          v-model="listQuery.proxy"
          style="width: 150px"
          class="filter-item"
          filterable
        >
          <el-option key label="所有代理" value />
          <el-option
            v-for="value in dailiArr"
            :key="value"
            :label="value"
            :value="value"
          />
      </el-select>
      <el-select
        v-model="listQuery.status"
        style="width: 150px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option key label="全部状态" :value="''" />
        <el-option key="2" label="已停用" :value="2" />
        <el-option key="1" label="已启用" :value="1" />
      </el-select>
      <!-- <el-select v-model="listQuery.is_change_pkg" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option key label="全部" :value="''" />
        <el-option key="2" label="修改包" :value="1" />
        <el-option key="1" label="未修改包" :value="2" />
      </el-select> -->
      
      <el-select v-model="listQuery.pkg" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option label="全部包" :value="''" />
        <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
      </el-select>

      <el-select v-model="listQuery.tg" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option key="12" label="全部推广渠道" value="" />
        <el-option v-for="(k, v, i) in  tg_option" :key="i" :label="k" :value="v" />
      </el-select>

      <el-input
        v-model="listQuery.channel"
        placeholder="请输入渠道账号进行搜索"
        style="width: 220px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
       plain size="small"
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
       plain size="small"
        v-waves
        class="filter-item"
        style="margin-left: 0;"
        type="primary"
        icon="el-icon-refresh"
        @click="handleCancel"
      >重置</el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
    <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="hap链接：">
                <div v-html="get_hap(props.row)"></div>
            </el-form-item>
            <el-form-item label="点击监测链接：">
              <div v-html="get_jiance(props.row)"></div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column key="2" label="渠道账号" min-width="50" align="center">
        <template slot-scope="{row}">
          <span>{{ row.username }} </span>
        </template>
      </el-table-column>
      <el-table-column key="3" label="归属代理" min-width="50" align="center">
        <template slot-scope="{row}">
          <span>{{ row.agency_username }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column key="4" label="报表最近更新日期" min-width="140" align="center">
        <template slot-scope="{row}">
          <span>{{ row.last_data_tm }}</span>
        </template>
      </el-table-column>-->
      
      <el-table-column label="配置" align="left" min-width="80" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <div v-if="row.channel_config">
            <!-- <el-link>书籍id : {{ row.channel_config.a1}}</el-link><br/> -->
              <!-- <el-link>书籍名称 : {{ row.channel_config.a2 }}</el-link><br/> -->
               <!--<el-link type="warning">小米 : {{configFormat(row.config, 'a3')}}</el-link>
              <el-link type="danger">华为 : {{configFormat(row.config, 'a4')}}</el-link>
              <el-link>全量 :{{configFormat(row.config, 'a5')}}</el-link> -->
              <el-link>拉起间隔 : {{configFormat(row.channel_config, 'a6')}}</el-link><br/>
              <el-link>推广回传概率 : {{configFormat(row.channel_config, 'a9')}}</el-link><br/>
              <!-- <el-link>口令 : {{configFormat(row.config, 'a7')}}</el-link><br/> -->
              <!-- <el-link>组合链接 : {{configFormat(row.config, 'a14')}}</el-link> -->
              <el-link>回传触发事件: {{configFormat(row.channel_config, 'a8')}}</el-link> <br/>
              <div v-if="row.pkg != 'com.jianyue.photo'">
                <div>书籍id： {{ row.channel_config.a1 }}</div>
                <div>书籍名称： {{ row.channel_config.a2 }}</div>
              </div>
              <div v-else>
                <div>作者： {{ row.channel_config.a1? author_list[row.channel_config.a1]: '' }}</div>
                <div>分类：{{ row.channel_config.a2? classify[row.channel_config.a2]: ''}} </div>
              </div>
            <!-- <el-link type="primary">oppo包 : {{configFormat(row.config, 'a10')}}</el-link>
              <el-link type="success">vivo包 : {{configFormat(row.config, 'a11')}}</el-link>
              <el-link type="warning">小米包 : {{configFormat(row.config, 'a12')}}</el-link>
              <el-link type="danger">华为包 : {{configFormat(row.config, 'a13')}}</el-link> -->
          </div>
          
        </template>
      </el-table-column>
      <el-table-column label="推广渠道" min-width="50" align="center">
        <template slot-scope="{row}">
          <div>{{ tg_option[row.tg] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="推广包名" min-width="50" align="center">
        <template slot-scope="{row}">
          <span>{{ pkgs[row.pkg] }}</span>
        </template>
      </el-table-column>
      <el-table-column key="5" label="操作" min-width="120" align="center">
        <template slot-scope="{row}">
          <el-link @click="showldtData(row)">查看落地页</el-link>
          <!-- <el-button type="primary" plain size="small" @click="channel_config(row)">渠道配制</el-button> -->
          <el-button v-if="row.status === '1'" type="danger" plain size="small" @click="editUserInfo(row,'2')">停用渠道</el-button>
          <el-button v-if="row.status === '2'" type="primary" plain size="small" @click="editUserInfo(row,'1')">启用渠道</el-button>
          <el-button type="primary" plain size="small" @click="handleLogin(row)">登录</el-button>
          <el-button v-if="row.status === '1'" type="primary" plain size="small" @click="pullSetting(row)">修改配置</el-button>
          <el-button type="danger" plain size="small" @click="delChannel(row)">删除渠道</el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column label="hap链接" min-width="100" align="center">
        <template slot-scope="{row}">
          <span v-html="get_hap(row)"></span>
        </template>

      </el-table-column>
      <el-table-column label="点击监测链接(应用投流)" min-width="100" align="center">
        <template slot-scope="{row}">
          <span v-html="get_jiance(row)"></span>
        </template>

      </el-table-column> -->

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :pageSizes = [20,30,50,100,200]
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getChannelList"
    />

    <div class="dialog">
      <el-dialog :title="channel_name + '拉起配制'" :visible.sync="pull_setting_dialog" label-position="top"  width="600px">
        <div v-loading="channel_loading">
            <el-form :model="form">

          <!-- <el-form-item label="拉起间隔(小时):" >
            <el-input type="number" v-model.number="form.a6" autocomplete="off" style="width: 100px"></el-input>
          </el-form-item> -->

          <el-form-item label="回传率(万分比):" >
                <el-input type="number" v-model.number="form.a9" autocomplete="off" style="width: 100px"></el-input>
          </el-form-item>

          <!-- <el-form-item label="回传触发事件:">
      
              <el-select
                  v-model="form.a8"
                  style="width: 150px"
                  class="filter-item"
                  filterable
                >
                  <el-option label="未选择" value="" />
                  <el-option label="uv" value="uv" />
                  <el-option label="点击" value="ex" />
              </el-select>
              <span> * 未选择默认uv是回传事件</span>
          </el-form-item> -->

        </el-form>
        </div>
        
        <div slot="footer" style="text-align:left" class="dialog-footer">
          <el-button @click="pull_setting_dialog = false">取 消</el-button>
          <el-button type="primary" @click="subChannelConfig()">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
      title="落地页"
      :visible.sync="ldyVisible"
      width="80%">
      <div>
        <el-table
        :data="ldtData"
        style="width: 100%">
        <el-table-column label="落地页链接" min-width="200" align="center">
          <template slot-scope="{row}">
            <div v-html="get_luodiye(langind_list, row)"></div>
          </template>
        </el-table-column>
        <el-table-column label="落地页图片" min-width="100" align="center">
          <template slot-scope="{row}">
            <el-image 
              v-if="langind_list[row.id]"
              style="width: 50px; height: 100px"
              :src="langind_list[row.id].img_url" 
              :preview-src-list="[langind_list[row.id].img_url]">
            </el-image>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ldyVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    </div>
    <VideoPlayer :url="video_url" :show="video_show" @clear="video_url = '', video_show=false"></VideoPlayer>
  </div>
  
</template>

<script> 
import { getChannelList, editUserInfo,quickLogin,getChannelConfig,setChannelConfig,getProxyNameList, getLangingPage, delChannel} from "@/api/admin/admin";
import { setToken, setUser, setType } from "@/utils/auth";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { MessageBox, Message } from "element-ui";
import {pkgs,get_hap, get_jiance, get_luodiye} from '@/utils/index'
import {is_video} from '@/utils/index'
import VideoPlayer from "@/components/VideoPlayer"
import {
   getPhotoCatygory,
    getAuthor,
  } from "@/api/admin/book";
  import {
    getPkgList
  } from "@/api/adv_admin/config";
export default {
  name: "channel",
  components: { Pagination , VideoPlayer},
  directives: { waves },
  data() {
    return {
      video_show: false,
      video_url: '',
      is_video,
      get_hap,
      get_jiance,
      get_luodiye,
      ldtData: [],
      ldyVisible: false,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      //获取列表时的参数
      listQuery: {
        page:1,
        page_size: 20,
        channel: "",
        status: "",
        is_change_pkg: "",
        proxy: '',
        tg:'',
        pkg: ''
      },
      formLabelWidth: '120px',
      pull_setting_dialog: false,
      form: {
        'a1': false,  // # cnzz统计oppo
        'a2': true,  // # cnzz统计vivo
        'a3': false,  // # cnzz统计小米
        'a4': true,  // # cnzz统计华为
        'a5': false,  // # cnzz全量统计
        'a6': 1,  // # 渠道拉起间隔
        'a7': true,  // # 口令
      },
      channel_name: "",
      channel_loading: false,
      is_fz: false,
      optionPackageName: pkgs,
      pp: {},
      dailiArr: [],
      langind_list : {},
      tg_option: {},
      author_list: {},
      classify: {},
      pkgs:{}
    };
  },
  created() {
    this.getPkgs();
    // this.getClassify()
    // this.getAuthor()
    this.getLangingPages()
    // this.getChannelList();
    this.pkgFormat()
    this.getChannelList();
    //获取代理列表
    this.getProxyNameList();
  },
  methods: {
    getPkgs(){
        getPkgList({data_type: '1'}).then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
    getAuthor(){
      getAuthor({menu: '1'}).then(res => {
            if(res.code == 200){
              this.author_list = res.data.list
            }
        })
    },
  getClassify(){
    getPhotoCatygory().then(res => {
        if(res.code == 200){
            this.classify = res.data.category;
        }
    })
  },
    show_video(url){
        this.video_show = true
        this.video_url = url
      },
    showldtData(row){
      this.ldyVisible = true
      this.ldtData = []
      for(let k in row.landing_page_id){
        this.ldtData.push({
          'id': row.landing_page_id[k],
          'username': row.username,
          'tg': row.tg,
          'channel_config': row.channel_config,
          'pkg': row.pkg,
          'show': row.show
        })
      }
      // console.log(this.ldtData)
    },
    getLangingPages(){
      getLangingPage({'tg': '1'}).then(res => {
        if (res.STATUS == 200){
          this.langind_list = res.DATA.landing_page;
          this.tg_option = res.DATA.tg
        }
      })
    },
    //获取代理列表
    getProxyNameList() {
      getProxyNameList().then((r) => {
        this.dailiArr = r.DATA;
      });
    },
    pkgFormat(){
      let a = {}
      for (let i = 0; i < pkgs.length; i++){
        if ( pkgs[i].key){
          a[pkgs[i].key] = pkgs[i].label
        } else{
          a[pkgs[i].key] = '无'
        }
        
      }
      this.pp = a
    },
    configFormat(config,key){
      let c = config
      switch(key){
        case 'a1':
          return c[key]? "开":"关"
        case 'a2':
          return c[key]? "开":"关"
        case 'a3':
          return c[key]? "开":"关"
        case 'a4':
          return c[key]? "开":"关"
        case 'a5':
          return c[key]? "开":"关"
        case 'a7':
          return c[key]? "开":"关"
        case 'a8':
          if(c[key]){
            if(c[key] == 'ex'){
              return '点击'
            }
            return c[key]
          }
          return c[key]
        case 'a10':
          return this.pp[c[key]]
        case 'a11':
          return this.pp[c[key]]
        case 'a12':
          return this.pp[c[key]]
        case 'a13':
          return this.pp[c[key]]
        default:
          return c[key]
      }
    },
    //获取渠道列表
    getChannelList() {
      let self = this;
      this.listLoading = true;
      getChannelList(this.listQuery).then((r) => {
        self.list = r.DATA.list;
        self.total = r.DATA.total;
        self.listLoading = false;
      });
    },

//登录
    handleLogin(row) {
      quickLogin({id:row.id}).then((response) => {
        if (response.STATUS === 200) {
           if (response.DATA.user_type == 2) {ydwhgs
            let domin1 = "Admin-Token-proxy.jianyue668.com";
            let domin2 = "user-proxy.jianyue668.com";
            let domin3 = "type-proxy.jianyue668.com";
            setToken(response.DATA.token, domin1);
            setUser(response.DATA, domin2);
            setType("daili", domin3);
            window.open("http://proxy.jianyue668.com/", "_blank");
          } else if (response.DATA.user_type == 3) {
            let domin1 = "Admin-Token-qudao.jianyue668.com";
            let domin2 = "user-qudao.jianyue668.com";
            let domin3 = "type-qudao.jianyue668.com";
            setToken(response.DATA.token, domin1);
            setUser(response.DATA, domin2);
            setType("qudao", domin3);

            window.open("http://qudao.jianyue668.com/", "_blank");
          }
        } else {
          Message({
            message: response.DEC || "获取token失败",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    //修改渠道信息
    editUserInfo(row, status) {
      let self = this;
      MessageBox.confirm(
        "确定将渠道号为 " + row.username + " 的渠道停用吗",
        "确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          editUserInfo({id:row.id},{ status }).then((r) => {
            if (r.STATUS === 200) {
              self.getChannelList();
              Message({
                message: status == "1" ? "开启成功" : "禁用成功",
                type: "success",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getChannelList();
    },
    handleCancel() {
      this.listQuery.page = 1;
      this.listQuery.channel = "";
      this.listQuery.status = 1;
      this.listQuery.is_change_pkg = ""
      this.listQuery.proxy = ''
      this.listQuery.tg = ''
      this.listQuery.pkg = ''
      this.getChannelList();
    },
    pullSetting(v) {
      this.pull_setting_dialog = true
      this.channel_loading = true
      getChannelConfig({'channel': v.username}).then(res => {
        if (res.STATUS == 200) {
          this.form = JSON.parse(res.DATA.config)
          this.channel_name = v.username
          this.is_fz = res.DATA.is_fuzhou
        } else{
          this.$message.error(res.DEC)
          this.pull_setting_dialog = false
        }
        this.channel_loading = false
      })
    },
    subChannelConfig(){
      setChannelConfig({channel: this.channel_name, config: JSON.stringify(this.form)}).then(res => {
        if (res.STATUS == 200){
          this.$message.success('修改成功')
          this.pull_setting_dialog = false
          this.getChannelList();
        }else{
          this.$message.error(res.DEC)
        }
        
      })
    },
    quanliang(v){
      if (v){
        this.form.a1 = true
        this.form.a2 = true
        this.form.a3 = true
        this.form.a4 = true
        this.form.a5 = true
      }
      
    },
    delChannel(row){
      MessageBox.confirm("确定删除渠道？删除后数据无法找回！！！", "确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delChannel({ username: row.username }).then((r) => {
              if (r.STATUS == 200) {
                this.getChannelList();
                Message({
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                });
              }
            });
          })
          .catch(() => {});
      
    }
  },
};
</script>

<style scoped>
.pageHidden {
  display: none;
}
@media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .pickertime {
    width: 100%;
  }
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 90%;

  }
  .demo-table-expand .el-form-item .el-form-item__content div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all
  }
</style>
